<script setup lang="ts">
import { Notification } from '@arco-design/web-vue'
import JobFormPanel from './JobFormPanel.vue'
import { ScheduleJobApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useTable } from '@/hooks'
import { useUserStore } from '@/stores'

defineOptions({ name: 'Job' })

const userStore = useUserStore()
const queryForm = reactive<ScheduleJobApi.ScheduleJobQuery>({
  jobName: undefined,
  status: undefined,
})

const {
  tableData,
  loading,
  pagination,
  search,
  handleDelete,
} = useTable(pagination => ScheduleJobApi.getPage({ ...queryForm, ...pagination }))

const columns: TableInstanceColumns[] = [
  {
    title: '序号',
    width: 66,
    align: 'center',
    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
  },
  { title: '任务名称', dataIndex: 'jobName', slotName: 'jobName', ellipsis: true },
  { title: '调度类型', dataIndex: 'cron', slotName: 'cron', ellipsis: true, render: ({ record }) => `CRON: ${record.cron}` },
  { title: '初始化策略', dataIndex: 'initStrategy', slotName: 'initStrategy' },
  { title: '描述', dataIndex: 'description', slotName: 'description', ellipsis: true, render: ({ record }) => record.description || '--' },
  { title: '状态', dataIndex: 'status', slotName: 'status' },
  {
    title: '操作',
    slotName: 'action',
    width: 200,
    align: 'center',
    fixed: 'right',
    show: userStore.hasPermission(['system:scheduleJob:write']),
  },
]

// 删除
const onDelete = (item: ScheduleJobApi.ScheduleJobResp) => {
  return handleDelete(() => ScheduleJobApi.remove(item.id), {
    content: `是否确定删除该条数据？`,
    showModal: true,
  })
}

const JobFormPanelRef = ref<InstanceType<typeof JobFormPanel>>()
// 新增
const onAdd = () => {
  JobFormPanelRef.value?.create()
}

// 详情
const onDetail = (row) => {
  JobFormPanelRef.value?.open(row.id)
}

const onShowLog = (row) => {

}

// 立即执行
const onExecuteOnce = (data) => {
  ScheduleJobApi.executeOnce(data.id).then((res) => {
    Notification.success('请求执行成功，请到任务日志查看执行结果')
  })
}
</script>

<template>
  <ProPage title="定时任务管理" description="对定时任务进行统一管理">
    <ProTable
      :data="tableData"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      @refresh="search"
    >
      <template #toolbar-left>
        <a-input v-model="queryForm.jobName" placeholder="请输入job名称" allow-clear @change="search">
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
        <a-input v-model="queryForm.status" placeholder="请输入状态" allow-clear @change="search">
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
      </template>
      <template #toolbar-right>
        <a-button v-permission="['system:schedule:manage']" type="primary" @click="onAdd">
          <template #icon>
            <icon-plus />
          </template>
          <span>创建</span>
        </a-button>
      </template>
      <template #jobName="{ record }">
        <a-link @click="onDetail(record)">
          {{ record?.jobName }}
        </a-link>
      </template>
      <template #initStrategy="{ record }">
        <CellDict :value="record.initStrategy" code="JobInitStrategyEnum" />
      </template>
      <template #status="{ record }">
        <CellStatus :status="record.status" />
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link v-permission="['system:schedule:manage']" @click="onShowLog(record)">
            日志
          </a-link>
          <a-popconfirm content="确定立即执行一次任务?" type="warning" @ok="onExecuteOnce(record)">
            <a-link v-permission="['system:schedule:manage']">
              执行
            </a-link>
          </a-popconfirm>
          <a-link v-permission="['system:schedule:manage']" status="danger" @click="onDelete(record)">
            删除
          </a-link>
        </a-space>
      </template>
    </ProTable>
    <JobFormPanel ref="JobFormPanelRef" @change="search" />
  </ProPage>
</template>

<style lang="less" scoped></style>
